<!-- 模块说明 -->
<template>
    <!-- v-for="index in 3"
v-for="index in 3"
v-for="index in 3"
 + index
 + index
 + index -->

    <van-nav-bar title="书友" />

    <div class="bbb">
        <van-tabs v-model:active="active" sticky color="#d3ab6d" line-height="1px" line-width="55px" lazy-render="true">

            <van-tab :title="'最新注册'">
            </van-tab>
            <van-tab :title="'最多关注'" />
            <van-tab :title="'最多出售'" />
            <!-- <van-tab > -->
        </van-tabs>
        <router-link to="/booksear" class="ccc">
            <img src="../../img/搜索(1).png" alt="" />
        </router-link>


    </div>


    <div class="big">
        <div class="pic">
            <img src="../../img/photo.jpg" />
        </div>

        <div class="name">
            <span class="n1">你的书包里装的是什么<img src="../../img/女(1).png"> </span>
            <span class="n2">安徽警官职业学院</span>
        </div>

        <div class="data">
            <div class="da1">
                <span>55</span>
                <span>出售</span>
            </div>
            <div class="da2">
                <span>7</span>
                <span>粉丝</span>
            </div>
        </div>
    </div>
    <!-- ---------------------------------------------------------------------- -->

    <div class="big">
        <div class="pic">
            <img src="../../img/photo.jpg" />
        </div>

        <div class="name">
            <span class="n1">小桔书店<img src="../../img/女(1).png"> </span>
            <span class="n2">湖南大学</span>
        </div>

        <div class="data">
            <div class="da1">
                <span>55</span>
                <span>出售</span>
            </div>
            <div class="da2">
                <span>7</span>
                <span>粉丝</span>
            </div>
        </div>
    </div>




    <!-- ------------------------------------------------------------------ -->
    <div class="big">
        <div class="pic">
            <img src="../../img/photo.jpg" />
        </div>

        <div class="name">
            <span class="n1">书山崎岖何为径<img src="../../img/男(1).png"> </span>
            <span class="n2">大连理工大学</span>
        </div>

        <div class="data">
            <div class="da1">
                <span>199522</span>
                <span>出售</span>
            </div>
            <div class="da2">
                <span>68</span>
                <span>粉丝</span>
            </div>
        </div>
    </div>

</template>

<script setup>

</script>
<style lang="scss" scoped>
.big {
    height: 60px;
    display: flex;
    // justify-content: center;
    align-items: center;
    border-bottom: 0.5px solid #999;
    // background: darkmagenta;
}

.big div {
    height: 45px;
}

.pic {
    width: 55px;
    // background:deeppink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pic img {
    width: 45px;
    border-radius: 45px;
    text-align: center;
}

.name {
    width: 180px;
    // background: yellow;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.name img {
    width: 15px;
    vertical-align: middle;
    margin-left: 4px;
}

.data {
    flex: 1;
    // width: 20px;
    // background: blue;
    display: flex;
    font-size: 12px;
    // justify-content: space-between;
    // justify-content: space-between;
    // align-content: space-between;
    // align-items: flex-end;
    // justify-content: center;
    // align-items: center;   

}

.n1,
.n2 {
    // background: pink;
    line-height: 20px;
    padding-left: 8px;


}

.n1 {
    font-size: 12px;
}

.n2 {
    font-size: 10px;
    color: #555;
}

.da1,
.da2 {
    display: flex;
    width: 50%;
    flex-direction: column;
    text-align: center;
    line-height: 16px;
    justify-content: center;

}

.bbb {
    display: flex;
    align-items: center;

}

.van-tabs--line {
    display: flex;
    flex: 1;
}

:deep(.van-sticky) {
    width: 260px;
}

.ccc {
    width: 10%;

    img {
        width: 14px;
        height: 14px;
        margin-top: 4px;
    }
}
</style>
